<template>
  <div class="bc-layout-container-header">
    <client-only>
      <notifications class="message-tip-box"/>
    </client-only>
    <div class="nuxt-progress" v-if="progressShow"></div>
    <div class="container-header" v-if="!showDetailHead">
      <div class="header-center">
        <div class="header-center-l">
          <div class="logo__wrap" >
            <div class="abs" @click.stop="routeToHome"></div>
            <div class="logo">
              <embed :src="BCLogo" width="111" height="26"
                     type="image/svg+xml"
                     pluginspage="http://www.adobe.com/svg/viewer/install/" />
            </div>
          </div>



          <ul>
            <nuxt-link tag="li" to="/">
              <span :style="{color:route==='index'||route===''?'#00AAE6':'#666'}">首页</span>
              <div class="abs-line" v-if="route==='index'||route===''"></div>
            </nuxt-link>
            <nuxt-link tag="li" to="/project?type=all">
              <span :style="{color:route==='project'?'#00AAE6':'#666'}">项目</span>
              <div class="abs-line" v-if="route==='project'"></div>
            </nuxt-link>
            <nuxt-link tag="li" to="/blog?type=all">
              <span :style="{color:route==='blog'?'#00AAE6':'#666'}">博客</span>
              <div class="abs-line" v-if="route==='blog'"></div>
            </nuxt-link>
            <nuxt-link tag="li" to="/dynamic?type=new">
              <span tag="span" to="/dynamic" :style="{color:route==='dynamic'?'#00AAE6':'#666'}">动态</span>
              <div class="abs-line" v-if="route==='dynamic'"></div>
            </nuxt-link>
            <nuxt-link tag="li" to="/topic?type=new">
              <span :style="{color:route==='topic'?'#00AAE6':'#666'}">话题</span>
              <div class="abs-line" v-if="route==='topic'"></div>
            </nuxt-link>
            <nuxt-link tag="li" to="/answer?type=all">
              <span :style="{color:route==='answer'?'#00AAE6':'#666'}">问答</span>
              <div class="abs-line" v-if="route==='answer'"></div>
            </nuxt-link>
            <nuxt-link tag="li" to="/news?type=all">
              <span :style="{color:route==='news'?'#00AAE6':'#666'}">资讯</span>
              <div class="abs-line" v-if="route==='news'"></div>
            </nuxt-link>

          </ul>

          <yun-input @keydown.enter.native="clickToSearch" @listenYunInputIcon="clickToSearch"  iconName="search" width='212px' placeholder="请输入关键词" v-model="searchValue"></yun-input>
        </div>
        <div class="header-center-r" v-if="!this.$store.state.userProfile.userId">
          <div></div>
          <p class="login-word">
            <span>
              <nuxt-link tag="span" to="/users/login">登录</nuxt-link>
            </span>
            ·
            <span>
              <nuxt-link tag="span" to="/users/register">注册</nuxt-link>
            </span>

          </p>
        </div>
        <div class="header-center-r" v-if="this.$store.state.userProfile.userId">
          <yun-icon style="height:16px;width:16px;line-height:16px" name="add" color="#ccc" hoverColor="#8CD88C"
                    @mouseover.native="changeStateShowBox(1)" @mouseleave.native="changeStateHideBox(1)"></yun-icon>
          <div class="notice-box">
            <div class="red-dot" v-if="this.$store.state.message.unReadCount > 0"></div>
            <yun-icon :class="alert?'notice-icon-active':'notice-icon'"  @click.native="$router.push('/personal-center/message/all')"  name="notification" hoverColor="#F8A06F"
                      @mouseover.native="changeStateShowBox(3)" @mouseleave.native="changeStateHideBox(3)"></yun-icon>

          </div>

          <img class="user-photo" @click="$router.push('/personal-center/home/blog')" @mouseleave="changeStateHideBox(2)" :src="this.$store.state.userProfile.avatar" alt="" @mouseover="changeStateShowBox(2)" />
            <ul class="abs-box abs-box1"  v-if="showHideBox1" @mouseover="changeStateShowBox(1)" @mouseleave="changeStateHideBox(1)">
              <li>
                <nuxt-link tag="span" to="/project/release">发布项目</nuxt-link>
              </li>
              <li>
                <nuxt-link tag="span" to="/blog/release">写博客</nuxt-link>
              </li>
              <li>
                <nuxt-link tag="span" to="/dynamic?type=new">发布动态</nuxt-link>

              </li>
              <li>
                <nuxt-link tag="span" to="/answer/release">我要提问</nuxt-link>

              </li>
<!--              <li>-->
<!--                <nuxt-link tag="span" to="/news/release">资讯投稿</nuxt-link>-->

<!--              </li>-->
            </ul>
          <ul class="abs-box abs-box2"  v-if="showHideBox2" @mouseover="changeStateShowBox(2)" @mouseleave="changeStateHideBox(2)">
            <li>
              <nuxt-link tag="span" to="/personal-center/home/blog">我的主页</nuxt-link>
            </li>
<!--            <li>-->
<!--              <nuxt-link tag="span" to="/personal-center/like/support">我的喜欢</nuxt-link>-->
<!--            </li>-->
<!--            <li>-->
<!--              <nuxt-link tag="span" to="/personal-center/like/collect">我的收藏</nuxt-link>-->

<!--            </li>-->
            <li>
              <nuxt-link tag="span" to="/personal-center/person/following">我的关注</nuxt-link>

            </li>
            <li>
              <nuxt-link tag="span" to="/personal-center/account/info">账号资料</nuxt-link>
            </li>
            <li @click="handleLogout">安全退出</li>
          </ul>

            <alerts-card class="abs-box3"  v-if="showHideBox3" @mouseover.native="changeStateShowBox(3)" @mouseleave.native="changeStateHideBox(3)"></alerts-card>
        </div>

      </div>

    </div>
    <div class="detail-header" v-if="showDetailHead">
      <div class="detail-header__center">
        <nuxt-link tag="p" to="/">首页</nuxt-link>
        <yun-icon size="12px" color="#999" pb="3px" name="left_arrow"></yun-icon>
        <nuxt-link tag="p" to="/blog" v-if="detailType==='blog'">博客</nuxt-link>
        <nuxt-link tag="p" to="/project" v-if="detailType==='project'">项目</nuxt-link>
        <nuxt-link tag="p" to="/answer" v-if="detailType==='answer'">问答</nuxt-link>
        <yun-icon size="12px" color="#999" pb="3px" name="left_arrow"></yun-icon>
        <nuxt-link tag="p" to="">{{detailTitle}}</nuxt-link>
      </div>

    </div>
    <div class="container-header-pad"></div>
    <div class="click-top" v-if="showToTop" @click="clickToTop">
      <div class="click-top__triangle"></div>
    </div>
  </div>

</template>


<script>

  import AlertsCard from './alertsMessage/alertsCard';
  import {globalBus} from '../common/globalBus'
  import config from '../../action/config';
  const Cookie = process.client ? require('js-cookie') : null
  import Logo from '../../assets/svg/logo.svg'
    export default {
      name:'container-header',
      data(){
        return{
          user_id:'1234',
          photo:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2575047779,2966283883&fm=26&gp=0.jpg',
          showHideBox1:false,
          showHideBox2:false,
          showHideBox3:false,
          searchValue:'',
          hideBox1Time:null,
          hideBox2Time:null,
          hideBox3Time:null,
          route:'home',
          progressShow:false,
          BCLogo:null,
          detailType:'',
          detailTitle:'',
          showDetailHead:false,
          showToTop:false,
          timer:null,
          alert:false,
        }
      },

      components:{
        AlertsCard
      },


      created(){
        this.route = this.$route.name;
        this.progressShow = true;
        setTimeout(()=>{
          this.progressShow = false;
        },900);
         this.BCLogo = Logo;
        globalBus.$on(config.event.listenDetailInfo,(title,type,id)=>{
          this.detailTitle = title;
          this.detailType = type;
        });
        this.changeHeader();
        this.playOneVideo();

        if(!this.$store.state.userProfile.userId){
          if(this.$route.path.indexOf('personal-center') !== -1||this.$route.path.indexOf('release') !== -1){
            this.$router.replace('/')
          }
        }
      },
      watch:{
        $route(route){
          this.route = route.name;
          this.progressShow = true;
          this.changeHeader();
          this.playOneVideo();
          setTimeout(()=>{
            this.progressShow = false;
          },900)
          if(!this.$store.state.userProfile.userId){
            if(this.$route.path.indexOf('personal-center') !== -1||this.$route.path.indexOf('release') !== -1){
              this.$router.replace('/')
            }
          }
        }
      },
      sockets: {
        connect(data) {
          /*this.alert = true;
          clearTimeout(this.alertTimer)
          this.alertTimer = setTimeout(()=>{
            this.alert = false;
          },1000)*/
        },
        push_event(data) {
          this.alert = true;
          clearTimeout(this.alertTimer)
          this.alertTimer = setTimeout(()=>{
            this.alert = false;
          },1000)

          this.$notify({
            title: '新消息',
            text: data.msgContent,
            duration: 6000
          })
          new Audio('/sounds/message.mp3').play()
          this.$store.commit('message/setUnReadCount', data.unReadCount)
        }
      },
      methods:{

        playOneVideo(){
          // if(process.browser){
          //   let videoArr=document.getElementsByTagName("video");
          //   console.log(videoArr);
          //   for(let i=0;i<videoArr.length;i++){
          //     videoArr[i].addEventListener("play", function(e){
          //       console.log('play'+e)
          //       let this1=this;
          //       this.play();
          //       for(let b=0;b<videoArr.length;b++){
          //         let this2=au[b];
          //         if(this1!==this2){
          //           this2.pause();
          //         }
          //       }
          //     });
          //   }
          // }

        },


        clickToSearch(){
          let  searchValue = this.searchValue;
          this.searchValue = '';
          if(this.$route.name.indexOf('search')===-1){
            this.$router.push('/search/all?keywords='+searchValue)

          }else{
            this.$router.replace('/search/all?keywords='+searchValue)

          }

        },
        handleLogout() {
          this.$alert('确认注销登录？', '', {
            confirmButtonText: '确定',
            callback: action => {
              this.$axios.$get(config.api.get.User.logout).then((response)=>{
                if(response.code === 0 ){
                  // 删除cookie
                  Cookie.remove(config.default_data.KEY_COOKIE_TOKEN)
                  // 移除登录信息
                  this.$store.commit('auth/logout')
                  // 移除用户信息
                  this.$store.commit('userProfile/removeUser')
                  this.routeToHome();
                }
              })

            }
          });
        },
        changeStateHideBox(...arg){
          if(arg.indexOf(1)===0){
            clearTimeout(this.hideBox1Time);
            this.hideBox1Time = setTimeout(()=>{
              this.showHideBox1=false
            },300)
          }
          if(arg.indexOf(2)===0){
            clearTimeout(this.hideBox2Time);
            this.hideBox2Time = setTimeout(()=>{
              this.showHideBox2=false
            },300)
          }
          if(arg.indexOf(3)===0){
            clearTimeout(this.hideBox3Time);
            this.hideBox3Time = setTimeout(()=>{
              this.showHideBox3=false
            },300)
          }
        },
        changeStateShowBox(...arg){
          clearTimeout(this.hideBox1Time);
          clearTimeout(this.hideBox2Time);
          clearTimeout(this.hideBox3Time);

          if(arg.indexOf(1)===0){
              this.showHideBox1=true
              this.showHideBox2=false
              this.showHideBox3=false
          }
          if(arg.indexOf(2)===0){
            this.showHideBox1=false
            this.showHideBox2=true
            this.showHideBox3=false
          }
          if(arg.indexOf(3)===0){
            this.showHideBox1=false
            this.showHideBox2=false
            this.showHideBox3=true
          }
        },
        routeToHome(){
          this.$router.push('/');
         },

        changeHeader(){
          let path = this.$route.path;
          let index = path.lastIndexOf('/');
          let route = path.substring(0,index);
          if(route==='/blog/detail'||route==='/project/detail'||route==='/answer/detail'){
            if(process.browser){
              document.removeEventListener('scroll',this.listenScroll2)
              document.addEventListener('scroll',this.listenScroll1)
            }
          }else{

            if(process.browser){
              document.removeEventListener('scroll',this.listenScroll1)
              document.addEventListener('scroll',this.listenScroll2)
            }
          }




        },

        listenScroll1(){
          let scrollTop = document.documentElement.scrollTop ||document.body.scrollTop;
          this.showDetailHead = scrollTop >= 400;
          this.showToTop = scrollTop >= 800;
        },
        listenScroll2(){
          this.showDetailHead =false;
          let scrollTop = document.documentElement.scrollTop ||document.body.scrollTop;
          this.showToTop = scrollTop >=  800;
        },

        clickToTop(){
          clearInterval(this.timer)
          this.changeStyleToTop(30);
        },
        changeStyleToTop(time){
          if(process.browser){
            let top = document.documentElement.scrollTop;
            let scrollNum = top/100;
            let time2 =time/scrollNum/1000;
            let that = this;
            if(top<5000){
              this.timer = setInterval(function () {
                if(document.documentElement.scrollTop>0){
                  document.documentElement.scrollTop-=100
                }else{
                  clearInterval(that.timer)
                }

              },time2)
            }else{
              document.documentElement.scrollTop=0;
            }

          }

        }
      },
    }
</script>

<style lang="scss">
  .bc-layout-container-header{
    .message-tip-box {
      position: fixed;
      z-index: 9999;
      font-size: 16px;
      top: 50px !important;
      right: 2px !important;

      .vue-notification-wrapper {
        margin-bottom: 10px;
        .vue-notification {
          position: relative;
          padding: 20px 16px;
          color: #333333;
          background: #FFFFFF;
          border: 1px solid #f6f6f6;
          border-radius: 6px;
          transition: all .3s;
          box-shadow: 0 0 6px rgba(100, 100, 100, 0.2);

          .notification-title {
            font-size: 14px;
            font-weight: 500;
            line-height: 16px;
          }
          .notification-title::before {
            position: absolute;
            content: '';
            background: #00AAE6;
            display: inline-block;
            width: 4px;
            height: 20px;
            border-radius: 0 3px 3px 0;
            font-size: 14px;
            left: -1px;
            top: 20px;
          }
          .notification-content {
            margin-top: 16px;
            font-size: 14px;
            line-height: 16px;
            a {
              color: #00AAE6;
            }
          }

        }

        &.my-type {
          /*
          Style for specific type of notification, will be applied when you
          call notification with "type" parameter:
          this.$notify({ type: 'my-type', message: 'Foo' })
          */
        }
      }

    }
    .nuxt-progress{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 2*$length;
      opacity: 1;
      width:100%;
      background-image: linear-gradient(to right ,rgba(0,170,230,.1) ,rgba(0,170,230,.8));
      z-index: 999999;
      animation: nuxt-progress .6s;
    }

    @keyframes nuxt-progress {
      from {width:0;opacity: .1}
      to {width: 100%;opacity: .8}
    }


    .fixed-header {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 9;
      width:100%;
      transition: width 0.28s;
    }

    .click-top{
      position:fixed;
      bottom:300*$length;
      right:calc((100% - 1256px)/2 - 56px);
      height:40*$length;
      width:40*$length;
      border-radius: 4*$length;
      background-color: #fff;
      overflow: hidden;
      @extend %cursorPointer;
      @extend %animate-transition;


      .click-top__triangle{
        @extend %animate-transition;
        margin:8*$length auto 0;
        border-bottom:8.5*$length solid #00AAE6;
        border-left:5*$length solid transparent;
        border-right:5*$length solid transparent;
        border-top:8.5*$length solid transparent;
        height:0;
        width:0;
      }
      &:hover{
        background-color: #00AAE6;
        .click-top__triangle{
          margin:3*$length auto 0;
          border-bottom:8.5*$length solid #fff;
        }

      }

    }

    .detail-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      height:66*$length;
      background-color: #fff;
      z-index: 7000;
      .detail-header__center{
        width:$pageWidth;
        margin:0 auto;
        @include fontStyle(17,66,500,#333,start);
        @extend %flex-row-spb;
        justify-content: flex-start;
        p{
          @extend %cursorPointer;
          @extend %animate-transition;
          &:hover{
            color:#00AAE6;
          }
        }

        i{
          margin:0 20*$length;
        }
      }
    }

    .container-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      height:66*$length;
      background-color: #fff;
      z-index: 7000;
      >.header-center{
        width:$pageWidth;
        margin:0 auto;
        @include fontStyle(17,66,500,#333,start);
        @extend %flex-row-spb;
        .header-center-l{
          @extend %flex-row-spb;
          justify-content: flex-start;
          .logo__wrap{
            width:111*$length;
            height:66*$length;
            @extend %flex-row-center;
            @extend %animate-transition;

            position: relative;
            &:hover{
              filter:brightness(1.3);
            }
            .logo{
              width:111*$length;
              height:100%;
              @extend %flex-row-center;

              font-size: 0;
              embed{
                @extend %cursorPointer;
                svg{

                }
              }

            }
            .abs{
              position: absolute;
              top:0;
              right:0;
              width:100%;
              height:100%;
              @extend %cursorPointer;
              opacity:0;

            }
          }



          >ul{
            margin-left:61*$length;
            margin-right:170*$length;
            li{
              display: inline-block;
              margin-left:40*$length;
              @include fontStyle(14,66,500,#666,start);
              @extend %animate-transition;
              @extend %cursorPointer;
              position: relative;

              span{
                color:#666;
                @extend %animate-transition;

                &:hover{
                  color:#00AAE6;
                }
              }
              .abs-line{
                position: absolute;
                bottom:0;
                left:0;
                right:0;
                margin:0 auto;
                width:16*$length;
                height:4*$length;
                border-radius:2*$length 2*$length 0 0;
                background-color: #00AAE6;
              }


            }
          }
        }
        .header-center-r{
          position:relative;
          width:152*$length;
          @extend %flex-row-spb;
          .notice-box{
            width:16*$length;
            height:16*$length;
            @extend %flex-row-center;
            position: relative;
            .red-dot{
              position: absolute;
              right:-3*$length;
              top:-3*$length;
              height:6*$length;
              width:6*$length;
              border-radius: 3*$length;
              background-color: #FF7474;

            }
            .notice-icon{
              width:16*$length;
              height:16*$length;
              line-height: 16*$length;
              color:#ccc;

            }

            .notice-icon-active{
              color:#F8A06F;
              line-height: 16*$length;

              width:16*$length;
              height:16*$length;
              animation: iconShake .5s  infinite;
            }
            @keyframes iconShake {
              0%{
                transform: rotate(0deg);
              }
              25%{
                transform: rotate(15deg);
              }
              50%{
                transform: rotate(0deg);
              }
              75%{
                transform: rotate(-15deg);
              }
              100%{
                transform: rotate(0deg);
              }
            }

          }
          .login-word{
            span{
              @include fontStyle(14,19,500,#666,start);
              @extend %animate-transition;
              @extend %cursorPointer;
              margin:0 2px;
              &:hover{
                color:#00AAE6;
              }
            }
          }
          .user-photo{
            height:32*$length;
            width:32*$length;
            border-radius:100%;
            @extend %cursorPointer;
          }
          .abs-box{
            transition: .4s ease;
            position:absolute;
            top:60*$length;
            padding:10*$length 40*$length;
            background-color: #fff;
            border-radius: 4*$length;
            box-shadow:0 6px 20px rgba(0,0,0,.08);
            li{
              margin:0 auto;
              padding:10*$length 0;
              @include fontStyle(14,19,500,#666,center);
              @extend %animate-transition;
              @extend %cursorPointer;
              span{
                @extend %animate-transition;
                color:#666;
                &:hover{
                  color:#00AAE6;
                }
              }
            }
          }
          .abs-box1{
            left:calc(-50% + 10px);
          }
          .abs-box2{
            right:calc(-50% + 16px);
          }
          .abs-box3{
            transition: .4s ease;
            position:absolute;
            top:60*$length;
            background-color: #fff;
            right:calc(-50% + 10px);
          }
        }

      }
    }
    .container-header-pad{
      height:66*$length;
      background-color: transparent;
    }
  }

</style>
